<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"
			class="queryForms">
			<el-form-item label="审批状态" prop="approvalStatus">
				<el-select v-model="queryParams.approvalStatus" placeholder="审批状态" clearable>
					<el-option v-for="dict in dict.type.default_approve" :key="dict.value" :label="dict.label"
						:value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
					v-hasPermi="['erp:productTechnologyVersions:add']">新增</el-button>
			</el-col>
			<!-- <el-col :span="1.5">
				<el-button type="primary" icon="el-icon-circle-check" size="mini" @click="handleSubmits" v-hasPermi="['erp:productTechnologyVersions:submit']">提交</el-button>
			</el-col> -->
			<el-col :span="1.5">
				<el-button type="primary" icon="el-icon-s-order" size="mini" @click="handleApprove"
					v-hasPermi="['erp:productTechnologyVersions:approve']">审批</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button size="mini" type="info" @click="handleBacks">返回</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button size="mini">{{ $route.query.productName }}-{{ $route.query.productModel }}</el-button>
			</el-col>
			<right-toolbar @changeTableData="changeTableData" menuNames="productTechnologyVersions35"
				:showSearch.sync="showSearch" @queryTable="getList" :columns.sync="columns"></right-toolbar>
		</el-row>

		<div class="informationTab" ref="eleTab">
			<el-table ref="table" @row-click="row_click" v-loading="loading" :data="productTechnologyVersionsList"
				@selection-change="handleSelectionChange" border height="100%">
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column label="序号" align="center" type="index" width="55" />
				<el-table-column label="版本" align="center" prop="technologyVersions" v-if="columns[0].visible" />
				<el-table-column label="审批状态" align="center" prop="approvalStatus" min-width="150"
					:show-overflow-tooltip="true" v-if="columns[1].visible">
					<template slot-scope="scope">
						<el-tag type="info" v-if="scope.row.approvalStatus === '0'" class="disableClick">未提交</el-tag>
						<el-tag v-if="scope.row.approvalStatus === '1'" @click="changeApprove(scope.row)"
							class="clickable">审批中</el-tag>
						<el-tag type="success" v-if="scope.row.approvalStatus === '2'" @click="changeApprove(scope.row)"
							class="clickable">已通过</el-tag>
						<el-tag type="danger" v-if="scope.row.approvalStatus === '3'" @click="changeApprove(scope.row)"
							class="clickable">未通过</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="启用状态" align="center" prop="enableStatus" v-if="columns[2].visible">
					<template slot-scope="scope">
						<div v-if="scope.row.enableStatus == '0'" style="color: #63b0b3">审批中</div>
						<div v-if="scope.row.enableStatus == '1'" style="color: #62ca5d">启用中</div>
						<div v-if="scope.row.enableStatus == '2'" style="color: #e1756d">禁用</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="550">
					<template slot-scope="scope">
						<el-button size="mini" type="text" icon="el-icon-circle-check" @click="handleSubmit(scope.row)"
							v-hasPermi="['erp:productTechnologyVersions:submit']"
							v-if="scope.row.approvalStatus == '0' || scope.row.approvalStatus == '3'">提交</el-button>
						<el-button size="mini" type="text" icon="el-icon-s-order" @click="handleApprove(scope.row)"
							v-hasPermi="['erp:productTechnologyVersions:approve']"
							v-if="scope.row.approvalStatus == '1' && scope.row.existApprovalStatus == '0'">审批</el-button>
						<el-button size="mini" type="text" icon="el-icon-s-order" @click="handleDesign(scope.row)"
							v-hasPermi="['erp:productTechnologyVersions:design']">设计工艺</el-button>
						<el-button size="mini" type="text" icon="el-icon-download" @click="handleTimeCard(scope.row)"
							v-hasPermi="['erp:productTechnologyVersions:timeCard']">生成工卡</el-button>
						<el-button size="mini" type="text" icon="el-icon-edit" @click="handleScare(scope.row)"
							v-hasPermi="['erp:productTechnologyVersions:scare']">补充文件</el-button>
						<el-button size="mini" type="text" icon="el-icon-s-order" @click="handleCopy(scope.row)"
							v-hasPermi="['erp:productTechnologyVersions:copy']">复制</el-button>

						<el-button size="mini" type="text" icon="el-icon-view" @click="workpoints(scope.row)"
							v-hasPermi="['erp:productTechnologyVersions:querywork']">查询计件</el-button>
						<el-button size="mini" type="text" icon="el-icon-edit" @click="editworkpoints(scope.row)"
							v-hasPermi="['erp:productTechnologyVersions:editwork']">修改计件</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<pagination menuNames="Pagination1001" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />
		<!-- <el-pagination class="pageSize" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryParams.pageNum" :page-sizes="[10, 20, 30, 50]" :page-size="queryParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> -->
		<!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> -->

		<!-- 添加或修改产品工艺版本对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body v-dialogDrag>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="版本" prop="technologyVersions">
					<el-input v-model="form.technologyVersions" placeholder="请输入版本" disabled />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>

		<el-dialog title="审批" :visible.sync="openApprove" width="900px" append-to-body v-dialogDrag>
			<ApproveTemplete @cancelApprove="cancelApprove" :openApprove="openApprove" labels="工艺流程"></ApproveTemplete>
		</el-dialog>

		<el-dialog title="审批流程" :visible.sync="openRecords" width="900px" append-to-body v-dialogDrag>
			<RecordsTemplete :approveRecord="approveRecord"></RecordsTemplete>
		</el-dialog>

		<el-dialog title="补充文件" :visible.sync="openExecutable" width="80%" append-to-body v-dialogDrag
			@close="closewhite">
			<el-form ref="forms" :model="forms" label-width="80px">
				<el-form-item label="工作单号" prop="orderNumber">
					<el-input v-model="forms.orderNumber" placeholder="请输入工作单号" maxlength="20" show-word-limit />
				</el-form-item>
				<el-form-item label="执行文件" prop="executableFile">
					<el-input v-model="forms.executableFile" placeholder="请输入执行文件" type="textarea" maxlength="500"
						:rows="5" show-word-limit />
				</el-form-item>
				<el-form-item label="说明" prop="explainFile">
					<ckeditor @ready="onEditorReady" ref="refCKEditor" :config="config" v-model="editorData"
						:read-only="only" :throttle="120" :editor-url="editorUrl"></ckeditor>
					<!-- <Editor v-model="forms.explainFile" :height="150"></Editor> -->
				</el-form-item>
				<el-form-item label="零组件图号注释" prop="partAnnotation">
					<!-- <Editor v-model="forms.partAnnotation" :height="150"></Editor> -->

					<ckeditor @ready="onEditorReady1" ref="refCKEditor1" :config="config1" v-model="editorData1"
						:read-only="only" :throttle="120" :editor-url="editorUrl"></ckeditor>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitFormExecutable">确 定</el-button>
				<el-button @click="cancels">取 消</el-button>
			</div>
		</el-dialog>

		<el-dialog title="复制" :visible.sync="openCopy" width="900px" append-to-body v-dialogDrag>
			<el-table ref="tablescopy" :data="copyTechnologysList" border>
				<el-table-column label="序号" align="center" type="index" width="55" />
				<el-table-column label="产品名称" prop="productName" min-width="150" :show-overflow-tooltip="true" />
				<el-table-column label="产品型号" prop="productModel" min-width="150" :show-overflow-tooltip="true" />
				<el-table-column label="工艺审批状态" align="center" prop="approvalStatus" min-width="150"
					:show-overflow-tooltip="true" />
				<el-table-column label="工艺版本" align="center" prop="productVersions" min-width="150"
					:show-overflow-tooltip="true" />
				<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
					width="120">
					<template slot-scope="scope">
						<el-button size="mini" type="text" icon="el-icon-s-operation"
							@click="handlecopyVersion(scope.row)"
							v-hasPermi="['erp:productTechnology:copyVersion']">工艺流程</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="copytotal > 0" :total="copytotal" :page.sync="queryParamscopy.pageNum"
				:limit.sync="queryParamscopy.pageSize" @pagination="getListcopy" />
		</el-dialog>

		<el-dialog title="版本" :visible.sync="openVersion" width="900px" append-to-body v-dialogDrag>
			<el-table ref="tablescopy" :data="versionTechnologysList" border>
				<el-table-column label="序号" align="center" type="index" width="55" />
				<el-table-column label="版本" align="center" prop="technologyVersions" />
				<el-table-column label="审批状态" align="center" prop="approvalStatus" min-width="150"
					:show-overflow-tooltip="true">
					<template slot-scope="scope">
						<el-tag type="info" v-if="scope.row.approvalStatus === '0'" class="disableClick">未提交</el-tag>
						<el-tag v-if="scope.row.approvalStatus === '1'" @click="changeApprove(scope.row)"
							class="clickable">审批中</el-tag>
						<el-tag type="success" v-if="scope.row.approvalStatus === '2'" @click="changeApprove(scope.row)"
							class="clickable">已通过</el-tag>
						<el-tag type="danger" v-if="scope.row.approvalStatus === '3'" @click="changeApprove(scope.row)"
							class="clickable">未通过</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="启用状态" align="center" prop="enableStatus">
					<template slot-scope="scope">
						<div v-if="scope.row.enableStatus == '0'" style="color: #63b0b3">审批中</div>
						<div v-if="scope.row.enableStatus == '1'" style="color: #62ca5d">启用中</div>
						<div v-if="scope.row.enableStatus == '2'" style="color: #e1756d">禁用</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
					width="120">
					<template slot-scope="scope">
						<el-button size="mini" type="text" icon="el-icon-s-operation" @click="handlecopyData(scope.row)"
							v-hasPermi="['erp:productTechnology:copyVersion']">复制</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="versiontotal > 0" :total="versiontotal" :page.sync="queryParamsVersion.pageNum"
				:limit.sync="queryParamsVersion.pageSize" @pagination="getListversion" />
		</el-dialog>

		<el-dialog title="计件工分" :visible.sync="openWork" width="900px" append-to-body v-dialogDrag>
			<el-table :data="workLists" border>
				<el-table-column label="序号" align="center" type="index" width="55" />
				<el-table-column label="计件工分名称" align="center" prop="workpointsName" />
				<el-table-column label="计件工分" align="center" prop="workpointsNumber" />
				<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
					width="120" v-if="disabled">
					<template slot-scope="scope">
						<el-button v-if="scope.row.id" size="mini" type="text" icon="el-icon-s-operation"
							@click="handleeditworkpoints(scope.row)"
							v-hasPermi="['erp:productTechnologyVersions:editwork']">修改</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- <pagination v-show="worktotal > 0" :total="worktotal" :page.sync="queryWorks.pageNum" :limit.sync="queryWorks.pageSize" @pagination="getListworks" /> -->
		</el-dialog>
		<el-dialog title="修改计件" :visible.sync="openworkForm" width="700px" append-to-body v-dialogDrag>
			<el-form ref="workForm" :model="workForm" :rules="workFormRules" label-width="80px">
				<el-form-item label="计件名称" prop="workpointsName">
					<el-input v-model="workForm.workpointsName" placeholder="请输入名称" disabled />
				</el-form-item>
				<el-form-item label="计件工分" prop="workpointsNumber">
					<el-input-number v-model="workForm.workpointsNumber" :precision="2" :step="0.1"
						:max="10000000"></el-input-number>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitFormWork">确 定</el-button>
				<el-button @click="cancelWork">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { getcolumn } from "@/api/selectList"
import { productList } from "@/api/productTechnology/productTechnology"
import Editor from "../../../../src/components/Editor"
import CKEditor from "ckeditor4-vue"
import { mapGetters } from "vuex"
import ApproveTemplete from "@/views/components/ApproveTemplete"
import RecordsTemplete from "@/views/components/RecordsTemplete"
import { listworkPoint, editworkPoint, PointDetails, copyWorkCard, approvalRecord, approverRepair, submitVersions, version, listProductTechnologyVersions, getProductTechnologyVersions, delProductTechnologyVersions, addProductTechnologyVersions, updateProductTechnologyVersions } from "@/api/productTechnology/productTechnologyVersions"
export default {
	name: "ProductTechnologyVersions",
	components: { ApproveTemplete, RecordsTemplete, Editor, ckeditor: CKEditor.component },
	dicts: ["default_approve"],
	computed: {
		...mapGetters(["sidebar"])
	},
	data() {
		return {
			disabled: true,
			workFormRules: {
				workpointsName: [{ required: true, message: "计件名称不能为空", trigger: "blur" }],
				workpointsNumber: [{ required: true, message: "计件工分不能为空", trigger: "blur" }]
			},
			openworkForm: false,
			openWork: false,
			workForm: {},
			queryWorks: {
				pageNum: 1,
				pageSize: 10,
				productTechnologyVersionsId: undefined
			},
			hasCopyId: "",
			copyVersionId: "",
			openVersion: false,
			queryParamsVersion: {
				pageNum: 1,
				pageSize: 10
			},
			versiontotal: 0,
			versionTechnologysList: [],
			openCopy: false,
			queryParamscopy: {
				pageNum: 1,
				pageSize: 10
			},
			copytotal: 0,
			copyTechnologysList: [],
			editor1: null,
			editor: null,
			only: false,
			config1: {
				textfield: [],
				height: "200px",
				// 工具栏
				toolbarGroups: [
					{ name: "document", groups: ["mode", "document", "doctools"] },
					{ name: "clipboard", groups: ["clipboard", "undo"] },
					{
						name: "editing",
						groups: ["find", "selection", "spellchecker", "editing"]
					},
					{ name: "forms", groups: ["forms"] },
					{ name: "basicstyles", groups: ["basicstyles", "cleanup"] },
					{
						name: "paragraph",
						groups: ["list", "indent", "blocks", "align", "bidi", "paragraph"]
					},
					{ name: "links", groups: ["links"] },
					{ name: "insert", groups: ["insert"] },
					{ name: "styles", groups: ["styles"] },
					//   { name: "colors", groups: ["colors"] },
					// { name: "tools", groups: ["tools"] },
					{ name: "others", groups: ["others"] }
					// { name: "about", groups: ["about"] }
				],
				//   extraPlugins: "notification",
				//   // toolbar 中的一些配置功能 需要在这里添加一下才可以用 例如 print colorbutton
				extraPlugins: "print,format,font,colorbutton,justify,notification",
				// 删除的工具栏
				//
				removeButtons:
					"Checkbox,Radio,TextField,Outdent,Indent,Styles,Format,FormatOutdent,Indent,NumberedList,Copy,Paste,BulletedList,Source,Form,SelectAll,Select,CopyFormatting,Scayt,HiddenField,Subscript,Superscript,SpecialChar,About,Image,Screen,Source,uploadimage,Form,Save,NewPage,ExportPdf,Preview,Print,Templates,Cut,PasteText,PasteFromWord,Undo,Redo,Replace,Find,Textarea,Button,ImageButton,Language,Unlink,Link,Anchor,HorizontalRule,Smiley,,BidiRtl,PageBreak,Iframe,ShowBlocks,CreateDiv,Blockquote,BidiLtr"
			},
			config: {
				textfield: [],
				height: "200px",
				// 工具栏
				toolbarGroups: [
					{ name: "document", groups: ["mode", "document", "doctools"] },
					{ name: "clipboard", groups: ["clipboard", "undo"] },
					{
						name: "editing",
						groups: ["find", "selection", "spellchecker", "editing"]
					},
					{ name: "forms", groups: ["forms"] },
					{ name: "basicstyles", groups: ["basicstyles", "cleanup"] },
					{
						name: "paragraph",
						groups: ["list", "indent", "blocks", "align", "bidi", "paragraph"]
					},
					{ name: "links", groups: ["links"] },
					{ name: "insert", groups: ["insert"] },
					{ name: "styles", groups: ["styles"] },
					//   { name: "colors", groups: ["colors"] },
					// { name: "tools", groups: ["tools"] },
					{ name: "others", groups: ["others"] }
					// { name: "about", groups: ["about"] }
				],
				//   extraPlugins: "notification",
				//   // toolbar 中的一些配置功能 需要在这里添加一下才可以用 例如 print colorbutton
				extraPlugins: "print,format,font,colorbutton,justify,notification",
				// 删除的工具栏
				//
				removeButtons:
					"Checkbox,Radio,TextField,Outdent,Indent,Styles,Format,FormatOutdent,Indent,NumberedList,Copy,Paste,BulletedList,Source,Form,SelectAll,Select,CopyFormatting,Scayt,HiddenField,Subscript,Superscript,SpecialChar,About,Image,Screen,Source,uploadimage,Form,Save,NewPage,ExportPdf,Preview,Print,Templates,Cut,PasteText,PasteFromWord,Undo,Redo,Replace,Find,Textarea,Button,ImageButton,Language,Unlink,Link,Anchor,HorizontalRule,Smiley,,BidiRtl,PageBreak,Iframe,ShowBlocks,CreateDiv,Blockquote,BidiLtr"
			},
			editorId: "",
			editorData1: "",
			editorData: "",
			editorUrl: "/ckeditor/ckeditor.js", //将指令的值更改为指向所需的 CKEditor 4 脚本位置来更改
			forms: {},
			openExecutable: false,
			eleTabTop: 0, //表格容器距浏览器顶部距离
			// 审批数据
			approveForm: {},
			openApprove: false,
			// 审批记录
			openRecords: false,
			approveRecord: {},
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 产品工艺版本表格数据
			productTechnologyVersionsList: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				productId: null,
				technologyVersions: null,
				approvalStatus: null,
				enableStatus: null
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {},
			// 列信息
			columns: [
				{ key: 0, label: `版本`, visible: true },
				{ key: 1, label: `审批状态`, visible: true },
				{ key: 2, label: `启用状态`, visible: true }
			],
			workLists: [],
			worktotal: 0,
			productId: ""
		}
	},
	created() {
		//获取表格容器距页面头部的距离
		this.handleScrollx()
	},
	mounted() {
		// 滚动条的获取
		this.handleScrollx()
		window.addEventListener("scroll", this.handleScrollx, true)
	},
	activated() {
		this.productId = this.$route.query.id
		this.getSize()
	},
	inject: ["reload"],
	destroyed() {
		window.removeEventListener("scroll", this.handleScrollx, true)
	},
	methods: {
		getSize() {
			getcolumn({ pageName: "Pagination1001" }).then(response => {
				this.queryParams.pageSize = response.data.length ? (response.data[0].limit ? response.data[0].limit : 10) : 10
				this.getList()
			})
		},
		resetworkpoints() {
			this.workForm = {
				workpointsName: undefined,
				workpointsNumber: undefined
			}
			this.resetForm("workForm")
		},
		submitFormWork() {
			this.$refs["workForm"].validate(valid => {
				if (valid) {
					editworkPoint(this.workForm).then(res => {
						this.$modal.msgSuccess("修改成功")
						this.openworkForm = false
						this.getListworks()
					})
				}
			})
		},
		cancelWork() {
			this.resetworkpoints()
			this.openworkForm = false
		},
		handleeditworkpoints(row) {
			this.resetworkpoints()
			PointDetails(row.id).then(res => {
				this.workForm = res.data
				this.openworkForm = true
			})
		},
		editworkpoints(row) {
			this.disabled = true
			this.queryWorks.productTechnologyVersionsId = row.id
			this.getListworks()
			this.openWork = true
		},
		workpoints(row) {
			this.disabled = false
			this.queryWorks.productTechnologyVersionsId = row.id
			this.getListworks()
			this.openWork = true
		},
		getListworks() {
			listworkPoint(this.queryWorks).then(res => {
				this.workLists = res.rows
				this.worktotal = res.total
			})
		},
		handleSizeChange(val) {
			this.queryParams.pageSize = val
			localStorage.setItem("pageSizes", this.queryParams.pageSize)
			this.getList()
		},
		handleCurrentChange(val) {
			// 当前页
			this.queryParams.pageNum = val
			localStorage.setItem("pageNums", this.queryParams.pageNum)
			this.getList()
			// this.currentPage = val
		},
		// 单击表格行
		row_click(row, column, event) {
			if (column && column.label == "操作") {
				return
			} else {
				this.$refs.table.toggleRowSelection(row)
			}
		},
		changeTableData() {
			this.$nextTick(() => {
				this.$refs.table.doLayout()
			})
		},

		handlecopyData(row) {
			copyWorkCard({
				copyId: row.id,
				id: this.hasCopyId
			}).then(res => {
				this.$modal.msgSuccess("复制成功")
				this.openVersion = false
				this.openCopy = false
				this.getList()
			})
		},
		handlecopyVersion(row) {
			this.copyVersionId = row.id
			this.getListversion()
			this.openVersion = true
		},
		getListversion() {
			this.queryParamsVersion.productId = this.copyVersionId
			listProductTechnologyVersions(this.queryParamsVersion).then(response => {
				this.versionTechnologysList = response.rows
				this.versiontotal = response.total
			})
		},
		getListcopy() {
			productList(this.queryParamscopy).then(response => {
				this.copyTechnologysList = response.rows
				this.copytotal = response.total
			})
		},
		handleCopy(row) {
			this.hasCopyId = row.id
			this.getListcopy()
			this.openCopy = true
		},
		closewhite() {
			this.openExecutable = false
			this.reload()
			this.getList()
		},
		cancels() {
			this.openExecutable = false
			this.reload()
			this.getList()
		},
		onEditorReady1() {
			const _this = this
			_this.editor1 = _this.$refs.refCKEditor1.instance
			if (_this.forms.partAnnotation) {
				_this.editor1.setData(_this.forms.partAnnotation)
			}
		},
		onEditorReady() {
			const _this = this
			_this.editor = _this.$refs.refCKEditor.instance
			if (_this.forms.explainFile) {
				_this.editor.setData(_this.forms.explainFile)
			}
		},
		handleBacks() {
			const obj = { path: this.$route.path }
			this.$tab.closePage(obj).then(() => {
				this.$router.go(-1)
				// this.$router.push({
				// 	path: "/productTechnology/productTechnology_menu",
				// 	query: {
				// 		productName: this.$route.query.productName,
				// 		productModel: this.$route.query.productModel
				// 	}
				// })
			})
		},
		handleScare(row) {
			getProductTechnologyVersions(row.id).then(response => {
				this.forms = response.data
				if (this.editor) {
					this.editor.setData(this.forms.explainFile)
				}
				if (this.editor1) {
					this.editor1.setData(this.forms.partAnnotation)
				}
				this.openExecutable = true
			})
		},
		submitFormExecutable() {
			// 使用正则表达式匹配所有空格
			// var replacedHtml = this.forms.explainFile.replace(/ /g, "&nbsp;")
			// let explainFile = replacedHtml
			// var replacedHtml1 = this.forms.partAnnotation.replace(/ /g, "&nbsp;")
			// let partAnnotation = replacedHtml1
			var parser = new DOMParser()
			var doc = parser.parseFromString(this.editorData, "text/html")
			var doc1 = parser.parseFromString(this.editorData1, "text/html")
			var pElements = doc.querySelectorAll("p")
			var pElements1 = doc1.querySelectorAll("p")
			if (pElements1.length) {
				for (let i = 0; i < pElements1.length; i++) {
					pElements1[i].style.setProperty("font-size", "12px")
					// 如果不是，设置样式
					pElements1[i].style.setProperty("margin-top", "5px")
					pElements1[i].style.setProperty("margin-bottom", "5px")
					pElements1[i].style.setProperty("margin-left", "0px")
					pElements1[i].style.setProperty("margin-right", "0px")
					// 设置背景颜色
					pElements1[i].style.setProperty("padding-top", "5px")
					pElements1[i].style.setProperty("padding-bottom", "5px")
					pElements1[i].style.setProperty("padding-left", "0px")
					pElements1[i].style.setProperty("padding-right", "0px")
				}
			}
			if (pElements.length) {
				for (let i = 0; i < pElements.length; i++) {
					pElements[i].style.setProperty("font-size", "12px")
					// 如果不是，设置样式
					pElements[i].style.setProperty("margin-top", "5px")
					pElements[i].style.setProperty("margin-bottom", "5px")
					pElements[i].style.setProperty("margin-left", "0px")
					pElements[i].style.setProperty("margin-right", "0px")
					// 设置背景颜色
					pElements[i].style.setProperty("padding-top", "5px")
					pElements[i].style.setProperty("padding-bottom", "5px")
					pElements[i].style.setProperty("padding-left", "0px")
					pElements[i].style.setProperty("padding-right", "0px")
				}
			}

			var serializer = new XMLSerializer()
			// 将文档对象转换为HTML字符串
			var htmlString = serializer.serializeToString(doc)
			var htmlString1 = serializer.serializeToString(doc1)
			// console.log(htmlString)
			var doc1 = parser.parseFromString(htmlString, "text/html")
			var doc2 = parser.parseFromString(htmlString1, "text/html")
			var ols1 = doc1.querySelectorAll("body")
			var ols2 = doc2.querySelectorAll("body")
			// 获取body元素内的HTML内容
			var bodyContent = ols1[0].innerHTML
			var bodyContent1 = ols2[0].innerHTML
			this.forms.explainFile = bodyContent
			this.forms.partAnnotation = bodyContent1
			updateProductTechnologyVersions(this.forms).then(response => {
				this.$modal.msgSuccess("设置成功")
				this.openExecutable = false
				// 刷新浏览器
				this.reload()
				this.getList()
			})
		},
		//获取表格容器距页面头部的距离
		handleScrollx() {
			this.eleTabTop = this.$refs.eleTab.getBoundingClientRect().top
		},
		handleDesign(row) {
			localStorage.setItem("currentVersionId", row.id)
			this.$router.push({
				path: "/productTechnology/Technology/productTechnologyName/index",
				query: {
					id: row.id,
					productId: row.productId,
					productName: this.$route.query.productName,
					productModel: this.$route.query.productModel
				}
			})
		},
		// 审批
		handleApprove(row) {
			if (row.id) {
				this.approveForm = {
					id: row.id,
					repairId: row.repairId
				}
			} else {
				this.approveForm = {}
			}
			this.openApprove = true
		},
		cancelApprove(data) {
			if (data.flag) {
				const _this = this
				let params = {
					approvalStatus: data.approvalStatus,
					causeRejection: data.causeRejection,
					workflowType: "4"
				}
				this.approveForm.id ? (params.id = _this.approveForm.id) : (params.ids = this.ids)
				this.$modal
					.confirm(`是否确认审批数据？`)
					.then(function () {
						return approverRepair(params)
					})
					.then(() => {
						_this.getList()
						_this.$modal.msgSuccess("审批成功")
						_this.$refs.table.clearSelection()
					})
					.catch(() => { })
			}
			this.openApprove = false
		},
		// 提交
		handleSubmits() {
			const _this = this
			this.$modal
				.confirm(`是否确认提交工艺版本数据项？`)
				.then(function () {
					return submitVersions({
						workIds: this.ids,
						workflowType: "4"
					})
				})
				.then(() => {
					_this.getList()
					_this.$modal.msgSuccess("提交成功")
					_this.$refs.table.clearSelection()
				})
				.catch(() => { })
		},
		// 提交
		handleSubmit(row) {
			const _this = this
			this.$modal
				.confirm(`是否确认提交工艺版本数据项？`)
				.then(function () {
					return submitVersions({
						submitStatus: row.approvalStatus == "0" ? "1" : row.approvalStatus == "3" ? "2" : "",
						workId: row.id,
						workflowType: "4"
					})
				})
				.then(() => {
					_this.getList()
					_this.$modal.msgSuccess("提交成功")
				})
				.catch(() => { })
		},
		// 审批流程
		changeApprove(row) {
			if (row.repairApprovalStatus == "0" || row.approvalStatus == "0") {
				return false
			}
			approvalRecord({
				id: row.id,
				workflowType: "4"
			}).then(res => {
				this.openRecords = true
				this.approveRecord = res.data
			})
		},
		showApprove(row) {
			let labels = ""
			this.dict.type.default_approve.forEach(element => {
				if (row.approvalStatus == element.value) {
					labels = element.label
				}
			})
			return labels
		},
		/** 查询产品工艺版本列表 */
		getList() {
			this.loading = true
			this.queryParams.productId = this.productId
			listProductTechnologyVersions(this.queryParams).then(response => {
				this.productTechnologyVersionsList = response.rows
				this.total = response.total
				this.loading = false
			})
		},
		// 取消按钮
		cancel() {
			this.open = false
			this.reset()
		},
		// 表单重置
		reset() {
			this.form = {
				id: null,
				productId: null,
				technologyVersions: null,
				approvalStatus: null,
				enableStatus: null,
				orderNumber: null,
				executableFile: null,
				explainFile: null,
				partAnnotation: null
			}
			this.resetForm("form")
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1
			this.getList()
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm")
			this.handleQuery()
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.id)
			this.single = selection.length !== 1
			this.multiple = !selection.length
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset()
			version(this.productId).then(res => {
				this.form.technologyVersions = res.msg
				this.form.productId = this.productId
				this.open = true
				this.title = "添加产品工艺版本"
			})
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset()
			const id = row.id || this.ids
			getProductTechnologyVersions(id).then(response => {
				this.form = response.data

				this.open = true
				this.title = "修改产品工艺版本"
			})
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					if (this.form.id != null) {
						updateProductTechnologyVersions(this.form).then(response => {
							this.$modal.msgSuccess("修改成功")
							this.open = false
							this.getList()
						})
					} else {
						addProductTechnologyVersions(this.form).then(response => {
							this.$modal.msgSuccess("新增成功")
							this.open = false
							this.getList()
						})
					}
				}
			})
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const ids = row.id || this.ids
			this.$modal
				.confirm("是否确认删除产品工艺版本数据项？")
				.then(function () {
					return delProductTechnologyVersions(ids)
				})
				.then(() => {
					this.getList()
					this.$modal.msgSuccess("删除成功")
				})
				.catch(() => { })
		},
		/** 导出按钮操作 */
		handleTimeCard(row) {
			this.download(
				"/erp/productTechnologyVersions/exportWorkCard",
				{
					id: row.id
				},
				`工卡_${new Date().getTime()}.doc`
			)
		}
	}
}
</script>
<style scoped lang="scss">
.pageSize {
	text-align: right;
	margin-right: 20px;
}
</style>
